<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../jquery-js/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #f06060;
            margin:80px 80px;
        }
        .son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            left: 100px;
            top: 100px;
        }
    </style>
    <script>
        $(function () {
            $('#btn').val('嘿嘿嘿');
            $('#btn1').click(function () {
                $('p').html('<h1>hhhh</h1>')
            });


            $('li')
                .css('font-size','30px')
                .css('color','green')
                .css('margin-top','5px')
                .css('margin-left','20px')
                .css('list-style','none');
            $('li').eq(0).css('float','right');
            $('li').eq(1).css('font-family','微软雅黑');
            console.log($('li').css('fontSize'));


            console.log('Father Width=====>'+$('.father').width());
            console.log('Father Height====>'+$('.father').height());
            console.log('Son Width=====>'+$('.son').width());
            console.log('Son Height====>'+$('.son').height());
            console.log(''+$('.son').offset());
            console.log(''+$('.son').position());

            $(window).resize(function () {
                console.log($(window).width());
                console.log($(window).height());
            })



        });
    </script>
</head>
<body>



<div class="father">
    <div class="son"></div>
</div>


<li>高圆圆</li>
<li>赵丽颖</li>
<li>哈哈哈</li>
<li>嘿嘿嘿</li>
<li>呵呵呵</li>


<input type="button" value="哈哈哈" id="btn">
<br><br>
<div>
    <input type="button" value="改变内容" id="btn1">
    <p>哈哈哈哈</p>
</div>
</body>
</html>